<!--suppress ALL -->
<script lang="ts">
export default {
  name: "OperateMethodCodeMirror"
}
</script>

<template>

  <el-tabs v-model="dataState.activeName" @tab-click="handleClick">

    <el-tab-pane v-if="dataState.formData.operateMode==='exchange' || dataState.formData.operateMode==='publish' "
                 label="编码函数"
                 name="encode">
      <div style="width: 100%; height: 500px; border: 1px solid #f00">
        <Codemirror
            v-model="dataState.encode"
            :autofocus="true"
            :disabled="false"
            :extensions="extensions"
            :style="{ height: '100%' }"
            class="code"
            @blur="handleClick('blur', $event)"
            @change="handleClick('change', $event)"
            @focus="handleClick('focus', $event)"
            @ready="handleClick('ready', $event)"
        />
      </div>
    </el-tab-pane>

    <el-tab-pane v-if="dataState.formData.operateMode==='exchange' || dataState.formData.operateMode==='report' "
                 label="解码函数"
                 name="decode">
      <div style="width: 100%; height: 500px; border: 1px solid #f00">
        <Codemirror
            v-model="dataState.decode"
            :autofocus="true"
            :disabled="false"
            :extensions="extensions"
            :style="{ height: '100%' }"
            class="code"
            @blur="handleClick('blur', $event)"
            @change="handleClick('change', $event)"
            @focus="handleClick('focus', $event)"
            @ready="handleClick('ready', $event)"
        />
      </div>
    </el-tab-pane>
  </el-tabs>

</template>

<script lang="ts" setup>
import {onMounted, reactive, toRefs, ref} from "vue";

import {Codemirror} from 'vue-codemirror'
import {javascript} from '@codemirror/lang-javascript'
import {oneDark} from '@codemirror/theme-one-dark'
import {RepoCompOperateEntity} from "@/api/cloud/repository/repocomp/script/version/types";

const extensions = [javascript(), oneDark];

const handleClick = (type: string, val: Event) => {
  console.log(type, val);
};


const emit = defineEmits(['update']);// 定义组件的事件通知

/**
 * 对外声明接口：父页面可以调用它
 */
defineExpose({initData});

// 数据状态：定义
let dataState = reactive({
  activeName: '',
  encode: '',
  decode: '',
  // 表单数据
  formData: {} as RepoCompOperateEntity,
});


/**
 * 刷新表单
 */
function initData(entity: RepoCompOperateEntity) {
  dataState.formData = entity;

  if (dataState.formData.engineParam.encode !== undefined){
    dataState.encode = dataState.formData.engineParam.encode?.code;
  }
  if (dataState.formData.engineParam.decode !== undefined){
    dataState.decode = dataState.formData.engineParam.decode?.code;
  }


  if (dataState.formData.operateMode === 'exchange') {
    dataState.activeName = 'encode'
  }
  if (dataState.formData.operateMode === 'publish') {
    dataState.activeName = 'encode'
  }
  if (dataState.formData.operateMode === 'report') {
    dataState.activeName = 'decode'
  }
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
});

</script>

<style>
.code {
  width: 300px;
  height: 300px;
}
</style>
